// 导入
import React from 'react';
import ReactDOM from 'react-dom/client';

// 创建渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 字符串数据
const name = 'Jack';
// 数字
const age = 18;
// 数组
const hobbies = ['吃饭', '睡觉', '敲代码'];
const hobbies2 = [<h2>吃饭</h2>, <h2>睡觉</h2>, <h2>敲代码</h2>];
// 对象
const obj = {
  name: 'Rose',
  age: 18,
};
const fn = () => {
  return 'fn';
};
const jsx = (
  <>
    <div key="5">
      <h2>{name}</h2>
      <h2>购物列表</h2>
      <br />
      <ul>
        <li>华为</li>
        <li>iPhone</li>
      </ul>
    </div>
    <div>xxx</div>
  </>
);

let url = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';

// UI
const div = (
  <div>
    <h2>{name}</h2>
    <h2>{age}</h2>
    <div>{hobbies}</div>
    {/* <div>{hobbies2}</div> */}
    <div>
      {obj.name}, {obj.age}
    </div>
    <div>{age > 28 ? '谈恋爱' : <h1>敲代码</h1>}</div>
    <div>{fn()}</div>
    {jsx}
    <img src={url} alt="头衔"></img>
  </div>
);

// 渲染
root.render(div);
